<style>
    .box{
        background: #ddd;
        padding: 20px 0;
    }
    .banner{
        width: 1200px;
        height: 500px;
        margin: 0 auto;
        position: relative;
    }
    .banner img{
        width: 1200px;
        height: 500px;
        position: absolute;
        left: 0;top:0;
        display: none;
    }
    .banner img:nth-child(1){
        display: block;
    }

    .banner .bannerList{
        position: absolute;
        bottom: 20px;
        left:0;right:0;
        display: flex;
        justify-content: center;
    }
    .banner .bannerList li{
        width: 10px;height: 10px;
        background-color: rgba(200,200,200,0.5);
        margin: 0 20px;
        border-radius: 50%;
    }

    .proList{
        width: 1200px;
        background: #efefef;
        border-radius: 10px;
        border: solid 2px #ccc;
        margin: 30px auto;
    }
    .proList h2{
        background: #eee;
        font-size: 20px;
        text-indent: 20px;
    }
    .proList .proCont{
        display: flex;
        flex-wrap: wrap;
        background: #fff;
    }
    .proCont .bigPro{
        width: 600px;
        height: 420px;
        border: solid 1px eee;
        box-sizing: border-box;
    }
    .proCont .bigPro img{
        width: 100%;
        height: 100%;
    }
    .proCont .smallPro{
        width: 300px;
        height: 420px;
        border: solid 1px #eee;
        box-sizing: border-box;
        text-align: center;
    }
    .proCont .smallPro img{
        width: 80%;
    }
    .proCont .smallPro p{
        margin: 0;padding: 0;
    }
    .proCont .smallPro p:nth-child(3){
        margin: 20px 0 40px;
        line-height: 16px;
        font-size: 12px;
        height: 16px;
        overflow: hidden;
        color: #999;
    }
    .proCont .smallPro p:nth-child(4){
        color: #d44d44;
        font-size: 22px;
        font-weight: bold;
    }
</style>
<div class="box">
    <div class="banner">
        <img src="https://resource.smartisan.com/resource/4b138867cd636e4b276e806e73ae923d.png?x-oss-process=image/resize,w_2440/format,webp/quality,Q_95" alt="">
        <img src="https://resource.smartisan.com/resource/1c17bfb1db7bb0749906e7f2c2dc4ba9.png?x-oss-process=image/resize,w_2440/format,webp/quality,Q_95" alt="">
        <img src="https://resource.smartisan.com/resource/1423427037c227737a007a83ab55faee.png?x-oss-process=image/resize,w_2440/format,webp/quality,Q_95" alt="">
        <img src="https://resource.smartisan.com/resource/b1313f8eb36550e89be08c1cb6a70f00.png?x-oss-process=image/resize,w_2440/format,webp/quality,Q_95" alt="">
    </div>
    <div class="proList">
        <h2>商品</h2>
        <div class="proCont">
            <div class="bigPro">
                <img src="https://resource.smartisan.com/resource/e17f6275ea83af6914bc0cbf0b8e9cbd.jpg?x-oss-process=image/resize,w_1200/format,webp" alt="">
            </div>
        </div>
    </div>
</div>
<script>
    // 根据数据渲染页面中的商品结构

    // 开启数据请求，准备请求商品数据
    $.ajax({
        url:"data/pro.json",    // 指定商品数据的地址或文件
        success:function(res){  // 请求成功之后要执行的功能
            // res就是请求成功之后拿到的数据
            // 注意解析
            res = JSON.parse(res);
            // console.log(res);
            // 动态创建结构：字符方式
            // 提前准备一个字符容器，用来存放拼接的字符
            var str = "";
            // 遍历数据
            for(var i=0;i<res.length;i++){
                // 不断的累加数据拼接之后的字符
                // 使用了反引号`包裹字符，可以实现字符的换行
                // 反引号字符中的变量，使用固定格式 ${} 包裹
                // 在拼接字符的过程中，将解析出的数据，放在字符的指定位置
                str = str + `<div class="smallPro"><a href="detail/index.html#${res[i].proId}">
                                <img src="${res[i].src}" alt="">
                                <p>${res[i].name}</p>
                                <p>${res[i].info}</p>
                                <p>￥${res[i].price}</p>
                            </a></div>`
            }
            // console.log(str);
            // 获取原容器的内容
            var d = $(".proCont").html()
            // 将原容器的内容，加上现拼接好的结构，一起放回原容器
            $(".proCont").html(d + str);
        },
        dataType:"text"     // 表示请求的数据，绝对是字符
    })
</script>
<script>
    // 用来标记当前图片的索引
    var i = 0;
    // 用来保存计时器，方便清除
    var t = null;

    // 获取当前图片的总数
    var len = $(".banner").find("img").length;

    // 开启自动播放
    autoPlay();

    // =========================

    // 提前创建小圆点的容器
    var bList = $("<ul class='bannerList'>");
    // 根据图片的个数，创建对应个小圆点
    for(var j=0;j<len;j++){
        bList.append($("<li>"));
    }
    // 将小圆点的容器，放置在轮播图的容器中
    $(".banner").append(bList);
    // 设置小圆点的默认样式
    setActive();

    // =========================

    // 添加小圆点的点击事件
    bList.children("li").click(function(){
        // 点击时获取点击的小圆点的索引
        var index = $(this).index();

        // 设置要隐藏的图片的效果
        $(".banner").find("img").eq(i).stop().fadeOut();
        // 设置要显示的图片的效果
        $(".banner").find("img").eq(index).stop().fadeIn();

        // 点击之后，当前这次的点击的索引，就是下次要离开的图片的索引
        i = index;

        // 修改小圆点的样式
        setActive();
    })

    // =========================

    // 鼠标进入停止
    $(".banner").mouseenter(function(){
        // 清除计时器
        clearInterval(t);
    })
    // 鼠标离开继续
    $(".banner").mouseleave(function(){
        // 重新开启自动播放
        autoPlay()
    })

    
    // 拓展作业：给每个小圆点添加事件，点击可以切换对应的图片


    // 自动播放的功能
    function autoPlay(){
        clearInterval(t);
        // 开启计时器
        t = setInterval(function(){
            // 计算索引
            if(i === len-1){    // 如果索引已经是最后一张
                // 下次要还原成第一张
                i = 0;
            }else{
                // 默认索引增加
                i++;
            }

            // 设置要隐藏的图片的效果
            $(".banner").find("img").eq(i-1).stop().fadeOut();
            // 设置要显示的图片的效果
            $(".banner").find("img").eq(i).stop().fadeIn();

            // 修改小圆点的默认样式
            setActive()

        }, 4000);
    }

    // 设置默认样式的功能
    function setActive(){
        // 找到当前小圆点，设置成白色
        bList.children("li").eq(i).css({
            background:"#fff"
        }).siblings("li").css({ // 找到其他小圆点，设置成灰色
            background:"rgba(200,200,200,0.5)"
        })
    }
</script>